<template lang="">
  <div class="left">
    <ul>
      <li class="div1 lis" v-for="(item,index) in items" @click="clickAction(index)" :key="index"
        :class="one == index?'line':'normal'">
        <div class="na">{{item.name}}</div>
        <div style="position: relative;">
          <div class="yuanjiao1" v-show="yuanjiaoShow">1</div>
        </div>

      </li>

    </ul>
  </div>
</template>

<script>
  export default {
    name: "ShowLeft",
    props: ['items'],
    data() {
      return {
        one: 0,
        yuanjiaoShow: false
      }
    },
    methods: {
      clickAction(index) {
        this.one = index;
        let heigh = document.querySelectorAll(".divL");
        // console.log(heigh[index].offsetTop)
        document.querySelector(".right").scrollTo({
          'top': heigh[index].offsetTop - 182,
          'behavior': 'smooth',
        })
      }
    },
  }
</script>

<style lang="less" scoped>
  .left {
    width: 27%;
    height: 450px;
    overflow: scroll;
  }

  ::webkit-scrollbar {
    display: none;
  }

  .div1 {
    width: 100%;
    height: 70px;
    line-height: 70px;
    padding-left: 5px;
    background-color: rgb(245, 245, 245);
    box-sizing: border-box;

  }

  .line {
    border-left: 3px solid rgb(49, 144, 232);
    background-color: #fff;
  }

  .normal {
    border-left: 0px solid rgb(49, 144, 232);
  }

  .redBlock {
    position: absolute;
    right: 0;
    top: 0;
    color: red;
  }

  li {
    display: flex;
    justify-content: space-between;
  }

  .yuanjiao1 {
    position: absolute;
    right: 0;
    border: 1px solid red;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    line-height: 15px;
    text-align: center;
    color: red;
  }
</style>